﻿<!DOCTYPE html>
<html>
	

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>小可爱你是月亮的星星</title>

		<link type="text/css" rel="stylesheet" href="./index_files/default.css">
		<script type="text/javascript" src="index_files/jquery.min.js"></script>
		<script type="text/javascript" src="index_files/jscex.min.js"></script>
		<script type="text/javascript" src="index_files/jscex-parser.js"></script>
		<script type="text/javascript" src="index_files/jscex-jit.js"></script>
		<script type="text/javascript" src="index_files/jscex-builderbase.min.js"></script>
		<script type="text/javascript" src="index_files/jscex-async.min.js"></script>
		<script type="text/javascript" src="index_files/jscex-async-powerpack.min.js"></script>
		<script type="text/javascript" src="index_files/functions.js" charset="utf-8"></script>
		<script type="text/javascript" src="index_files/love.js" charset="utf-8"></script>
		<style type="text/css">
			<!-- .STYLE1 {
				color: #666666
			}
			
			-->
		</style>
	</head>

	<body>
		 <audio id="bgmMusic" src="adjsn.mp3" autoplay="autoplay" loop preload="auto"
                        type="audio/mp3">
                        </audio>
		<div id="main">

			<div id="wrap">
				<div id="text">
					<div id="code">
						<span class="say">你和我： </span><br>
						<span class="say">Our 我们 </span><br>
						<span class="say"> </span><br>
						<span class="say">// 不经意相识, 或许是缘分，或许是注定的。</span><br>
						<span class="say"> </span><br>
						<span class="say">// 我不确定未来你能否幸福</span><br>
						<span class="say"> </span><br>
						<span class="say">//但我发誓，我会努力让你幸福</span><br>
						<span class="say"> </span><br>
						<span class="say">// 以后再累都不用害怕，因为你有我。</span><br>
						<span class="say"> </span><br>
						<span class="say">// 记得在你最需要的时候想起我。</span><br>
						<span class="say"> </span><br>
						<span class="say">// 我会一直陪着你，走过以后的日子</span><br>
						<span class="say"> </span><br>
						<span class="say">// You are my only girl..永远..</span><br>
						<span class="say"> </span><br>
						
						<span class="say"><span class="space"></span> -- 月亮--</span>
					</div>
				</div>
				<div id="clock-box">
				月亮<span class="STYLE1">与</span> 星星<span class="STYLE1">已经相识了</span>
					<div id="clock"></div>
				</div>
				<canvas id="canvas" width="1100" height="680"></canvas>
			</div>

		</div>

		<script>
		</script>

		<script>
			(function() {
				var canvas = $('#canvas');

				if(!canvas[0].getContext) {
					$("#error").show();
					return false;
				}

				var width = canvas.width();
				var height = canvas.height();

				canvas.attr("width", width);
				canvas.attr("height", height);

				var opts = {
					seed: {
						x: width / 2 - 20,
						color: "rgb(190, 26, 37)",
						scale: 2
					},
					branch: [
						[535, 680, 570, 250, 500, 200, 30, 100, [
							[540, 500, 455, 417, 340, 400, 13, 100, [
								[450, 435, 434, 430, 394, 395, 2, 40]
							]],
							[550, 445, 600, 356, 680, 345, 12, 100, [
								[578, 400, 648, 409, 661, 426, 3, 80]
							]],
							[539, 281, 537, 248, 534, 217, 3, 40],
							[546, 397, 413, 247, 328, 244, 9, 80, [
								[427, 286, 383, 253, 371, 205, 2, 40],
								[498, 345, 435, 315, 395, 330, 4, 60]
							]],
							[546, 357, 608, 252, 678, 221, 6, 100, [
								[590, 293, 646, 277, 648, 271, 2, 80]
							]]
						]]
					],
					bloom: {
						num: 700,
						width: 1080,
						height: 650,
					},
					footer: {
						width: 1200,
						height: 5,
						speed: 10,
					}
				}

				var tree = new Tree(canvas[0], width, height, opts);
				var seed = tree.seed;
				var foot = tree.footer;
				var hold = 1;

				canvas.click(function(e) {
					var offset = canvas.offset(),
						x, y;
					x = e.pageX - offset.left;
					y = e.pageY - offset.top;
					if(seed.hover(x, y)) {
						hold = 0;
						canvas.unbind("click");
						canvas.unbind("mousemove");
						canvas.removeClass('hand');
					}
				}).mousemove(function(e) {
					var offset = canvas.offset(),
						x, y;
					x = e.pageX - offset.left;
					y = e.pageY - offset.top;
					canvas.toggleClass('hand', seed.hover(x, y));
				});

				var seedAnimate = eval(Jscex.compile("async", function() {
					seed.draw();
					while(hold) {
						$await(Jscex.Async.sleep(10));
					}
					while(seed.canScale()) {
						seed.scale(0.95);
						$await(Jscex.Async.sleep(10));
					}
					while(seed.canMove()) {
						seed.move(0, 2);
						foot.draw();
						$await(Jscex.Async.sleep(10));
					}
				}));

				var growAnimate = eval(Jscex.compile("async", function() {
					do {
						tree.grow();
						$await(Jscex.Async.sleep(10));
					} while (tree.canGrow());
				}));

				var flowAnimate = eval(Jscex.compile("async", function() {
					do {
						tree.flower(2);
						$await(Jscex.Async.sleep(10));
					} while (tree.canFlower());
				}));

				var moveAnimate = eval(Jscex.compile("async", function() {
					tree.snapshot("p1", 240, 0, 610, 680);
					while(tree.move("p1", 500, 0)) {
						foot.draw();
						$await(Jscex.Async.sleep(10));
					}
					foot.draw();
					tree.snapshot("p2", 500, 0, 610, 680);

					
					canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
					canvas.css("background", "#ffe");
					$await(Jscex.Async.sleep(300));
					canvas.css("background", "none");
				}));

				var jumpAnimate = eval(Jscex.compile("async", function() {
					var ctx = tree.ctx;
					while(true) {
						tree.ctx.clearRect(0, 0, width, height);
						tree.jump();
						foot.draw();
						$await(Jscex.Async.sleep(25));
					}
				}));

				var textAnimate = eval(Jscex.compile("async", function() {
					var together = new Date();
					together.setFullYear(2018, 8,22); //时间年月日
					together.setHours(0); //小时	
					together.setMinutes(0); //分钟
					together.setSeconds(0); //秒前一位
					together.setMilliseconds(2); //秒第二位

					$("#code").show().typewriter();
					$("#clock-box").fadeIn(500);
					while(true) {
						timeElapse(together);
						$await(Jscex.Async.sleep(1000));
					}
				}));

				var runAsync = eval(Jscex.compile("async", function() {
					$await(seedAnimate());
					$await(growAnimate());
					$await(flowAnimate());
					$await(moveAnimate());

					textAnimate().start();

					$await(jumpAnimate());
				}));

				runAsync().start();
			})();
		</script>
<!--<div align="center"><a href="http://yangy.dev.dxdc.net/love/index.html" target="_parent"><img src="a/1.jpg" ></a></div>-->
	</body>

</html>